<template>
    <div>
        <div class="payment">
            <h1 class="jine">支付金额</h1>
            <h1 class="jine1">￥{{totoAmount |amountMin100(2)}}</h1>
            <h1 class="payment_typ">支付方式</h1>
            <ul class="paymentType">
                <li class="border">
                    <div class="paymentType_left">
                        <img src="../../../assets/personal/images/hongbao.png">
                        <h1>红包支付</h1>
                        <h2>当前￥{{userScore |amountMin100(2)}}</h2>
                    </div>
                    <div class="paymentType_right">
                        <div class="money">
                            -￥{{hongbaochajia |amountMin100(2)}}
                            <div class="chak" @click="Redenvelopes(1)" :class="{chak_avti:1==hongbaoType}"></div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="paymentType_left">
                        <img src="../../../assets/personal/images/chat-icon1.png">
                        <h1>微信支付</h1>
                        <h2>微信钱包</h2>
                    </div>
                    <div class="paymentType_right">
                        <div class="money">
                            -￥{{hongbaoyichu |amountMin100(2)}}
                            <div class="chak" @click="Redenvelopes(2)" :class="{chak_avti:1==weixinType}"></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="clefix"></div>
        </div>
        <a class="settlement" @click="settlement">结算</a>
    </div>
</template>
<style scoped>
    .jine {
        margin: 0 auto;
        width: 150px;
        margin-top: 20px;
    }

    .jine1 {
        font-size: 20px;
        margin: 0 auto;
        width: 150px;
        margin-top: 20px;
    }

    .payment {
        width: 100%;
        text-align: left;
        background: white;
        margin-bottom: 50px;
    }

    .payment_typ {
        margin-left: 16px;
        font-size: 15px;
        padding: 13px 0;
        color: #a7a7a7;
    }

    .paymentType_left {
        margin-left: 15px;
        width: 40%;
    }

        .paymentType_left img {
            float: left;
            width: 29px;
            height: 29px;
            margin-right: 8px;
        }

    .paymentType li {
        padding: 15px 0;
        background: white;
    }

    .paymentType_left h1 {
        font-size: 15px;
        line-height: 6px;
    }

    .paymentType_left h2 {
        line-height: 30px;
        font-size: 11px;
        margin-top: 6px;
        color: #949494;
    }

    .border {
        border-bottom: 1px solid #e5e5e5;
    }

    .money {
        position: relative;
        right: 10px;
        top: -35px;
    }

    .paymentType_right {
        float: right;
    }

    .chak {
        width: 20px;
        height: 20px;
        float: right;
        margin: 0 10px;
        border-radius: 50%;
        background: url("../../../assets/personal/images/choose-icon-active.png") no-repeat no-repeat;
        background-size: 100% 100%;
    }

    .footer {
        width: 100%;
        background: white;
        padding: 10px 0;
    }

        .footer strong {
            display: block;
            font-size: 12px;
            color: #999999;
            font-weight: normal;
            margin-left: 50%;
            text-align: right;
            width: 40px;
            float: left;
        }

    #AllTotal {
        display: block;
        font-size: 0.8rem;
        color: #ff0808;
        font-weight: bold;
        position: relative;
        left: -0.3rem;
        text-align: center;
    }

    .settlement {
        color: #fff;
        background: #ff0808;
        width: 4rem;
        height: 1.8rem;
        border-radius: 5px;
        line-height: 1.8rem;
        font-size: 14px;
        text-align: center;
        margin-right: 1rem;
        display: block;
        float: right;
    }

    .i_mages {
        position: relative;
        right: -170px;
    }

    .chak_avti {
        width: 20px;
        height: 20px;
        float: right;
        margin: 0 10px;
        border-radius: 50%;
        background: url("../../../assets/personal/images/bsgg.png") no-repeat no-repeat;
        background-size: 100% 100%
    }
</style>
<script>
    export default {
        data() {
            return {
                totoAmount: this.$route.query.amount,
                youhuei_style: false,
                mun_comp: [],
                userScore: '',
                hongbaoType: 1,
                hongbaochajia: 0,//红包差价
                hongbaoyichu: 0,//红包超出
                weixinType: 1,//微信TYPE
                orderType: '',
                orderId: this.$route.query.id
            }
        },
        mounted() {
            this.loadwalletinfo();
        },
        methods: {
            loadwalletinfo: function () {//钱包
                this.$http.get(this.APIURL_PREFIX + "/api/wallet").then((response) => {
                    this.userScore = response.data.data.userScore
                    this.userId = response.data.data.userId
                    console.log(this.userScore)
                }).catch(function (err) {
                    console.log(err)
                });
            },
            Redenvelopes: function (typ) {//红包
                if (1 == typ) {
                    if (1 == this.hongbaoType) {
                        if (this.userScore == 0) {
                            console.log("等于0")
                        } else {
                            this.hongbaoType = 2
                            console.log("选中")
                            if (this.userScore < this.totoAmount) {
                                console.log("选中_1")
                                this.hongbaochajia = this.userScore
                                this.hongbaoyichu = this.totoAmount - this.userScore
                                if (this.hongbaoyichu > 0) {
                                    this.weixinType = 2
                                    console.log("选中_3")
                                } else {
                                    this.weixinType = 1
                                    console.log("选中_4")
                                }
                            } else {
                                if (this.userScore > this.totoAmount) {
                                    this.weixinType = 1
                                    console.log("选中_2")
                                }
                                console.log("选中_5")
                                this.hongbaochajia = this.totoAmount
                                this.hongbaoyichu = 0
                            }
                        }

                    } else {
                        this.hongbaoType = 1
                        this.hongbaochajia = 0;
                        this.weixinType = 2
                        this.hongbaoyichu = this.totoAmount
                        console.log("进来了" + this.hongbaoyichu)
                    }
                } else {
                    if (1 == this.weixinType) {
                        if (this.userScore > this.totoAmount && this.hongbaoType == 2) {
                            this.weixinType = 1
                           layer.msg("红包金额充足不想使用红包请取消红包勾选")
                        } else {
                            this.weixinType = 2
                            console.log("选中+1" + "sss" + this.hongbaoType)
                            if (1 == this.hongbaoType) {
                                this.hongbaoyichu = this.totoAmount
                            }
                        }
                    } else {
                        this.weixinType = 1
                        this.hongbaochajia = 0;
                        if (this.hongbaoyichu > 0) {
                            console.log("超出了")
                            if (1 == this.hongbaoType) {
                            } else {
                                this.hongbaochajia = this.userScore
                                this.weixinType = 2
                            }
                        } else {
                            this.weixinType = 1
                            this.hongbaoyichu = 0
                            this.hongbaochajia = this.totoAmount
                        }
                        console.log("进来了+2" + this.hongbaoyichu)
                    }
                }
            },
            settlement: function () {//结算
                if (this.hongbaoType == 1 && this.weixinType == 1) {
                   layer.msg("请选择支付方式")
                } else {
                    if (2 == this.weixinType && 1 == this.hongbaoType) {//现金
                        console.log(this.totoAmount)
                        var mo = this.totoAmount / 100
                        mo = mo.toFixed(2)
                        console.log(mo)
                        window.location = '/wap/redenvelopes_wx.html?id=' + this.orderId + "&Amount=" + mo + "&type=2"
                    } else {
                        // window.location='/wap/redenvelopes.html?Amount='+this.totoAmount+"id="+response.data.data.orderId+"amountScore="+this.userScore
                        window.location = '/wap/redenvelopes.html?id=' + this.orderId + "&Amount=" + this.totoAmount + "&amountScore=" + this.userScore + "&type=1"
                        //  this.$router.push({name:'redenvelopes',query:{id:response.data.data.orderId,Amount:this.totoAmount,amountScore:this.userScore}})
                    }
                }
            }
        }
    }
</script>
